<template>
  <view class="page">

    <view class="m-banner-img">
      <view class="member-top">
        <navigator url="/member/member/data" class="m-user-info">
          <image lazy-load :src="(userInfo.user_avatar)" mode="scaleToFill"/>
          <view class="m-name">
            <label>{{ userInfo.user_nickname }}</label>
            <text v-if="fxData.user_role.user_role_name"></text>
            <text class="sup">{{ fxData.user_role.user_role_name }}</text>
			<!-- v-if="Config.PLANTFORM_FX_ENABLE" -->
			<br/>
          </view>
        </navigator>
        <view class="g-flex member-order-tab">
          <navigator url="/member/fans/endorsement" class="g-flex-item">
            <view class="iconfont zc zc-qrcode i-type"></view>
            {{ __('生成推广码') }}
          </navigator>
		 <label style="margin-right: 50rpx;margin-top: 55rpx;" v-if="Config.PLANTFORM_FX_ENABLE"
		        @click="copyId(userInfo.user_id)">{{ __('推广码') }}: {{ userInfo.user_id }} </label>
				
          <navigator v-if="false" url="/pagesub/westore/index" class="g-flex-item">
            <view class="iconfont zc zc-dianpu i-type"></view>
            {{ __('我的小店') }}
          </navigator>
        </view>
      </view>
    </view>
    <view class="m-panel-bd">
      <view class="m-media-box m-media-box-small-appmsg">
        <view :class="{'m-cells':1, iconBoxLattice:true}">
          <navigator v-if="true" url="/member/fans/list" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.all_num }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('累计邀请') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="true" url="/member/fans/list" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.month_num }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('本月新增') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="true" url="/member/fans/profitlist" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ mf(fxData.commission_amount, 2) }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('累计佣金') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

		  <navigator v-if="commission_withdraw_mode==0" url="/member/cash/commissionapply" class="m-cell m-cell-access">
		  	<view class="m-cell-hd " style="color:#db384c">
		  		<label >{{ mf(fxData.user_commission_now, 2) }}</label>
		  	</view>
		  	<view class="m-cell-bd m-cell-primary">
		  		<p>{{__('佣金提现')}}</p>
		  	</view>
		  	<text class="m-cell-ft"></text>
		  </navigator>
		  <navigator v-else url="/member/cash/commissionwithdraw" class="m-cell m-cell-access">
		  	<view class="m-cell-hd " style="color:#db384c">
		  		<label >{{ mf(fxData.user_commission_now, 2) }}</label>
		  	</view>
		  	<view class="m-cell-bd m-cell-primary">
		  		<p>{{__('佣金提现')}}</p>
		  	</view>
		  	<text class="m-cell-ft"></text>
		  </navigator>

          <navigator v-if="false" url="/member/fans/index" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.product_num }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('推广商品') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="false" url="/member/fans/index" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.order_num }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('推广订单') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="false" url="/member/fans/index" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.finish_nums }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('完成订单') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>


          <navigator v-if="false" url="/member/fans/profitlist?level=1" class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_buy_amount_0 }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('累计消费奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="fxData.user_role.user_is_sp" url="/member/fans/profitlist?level=6"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_directseller_amount_0 }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('累计销售奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="fxData.user_role.user_is_pt" url="/member/fans/profitlist?level=15"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_partner_buy_trade }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('合伙消费奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="fxData.user_role.user_is_pt" url="/member/fans/profitlist?level=25"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_partner_directseller_trade }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('合伙销售奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>


          <navigator v-if="fxData.user_role.user_is_ca" url="/member/fans/profitlist?level=10"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_buy_ca }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('市代消费奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="fxData.user_role.user_is_ca" url="/member/fans/profitlist?level=20"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_directseller_ca }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('市代销售奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>


          <navigator v-if="fxData.user_role.user_is_da" url="/member/fans/profitlist?level=11"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_buy_da }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('区代消费奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>

          <navigator v-if="fxData.user_role.user_is_da" url="/member/fans/profitlist?level=21"
                     class="m-cell m-cell-access">
            <view class="m-cell-hd " style="color:#db384c">
              <label>{{ fxData.commission_directseller_da }}</label>
            </view>
            <view class="m-cell-bd m-cell-primary">
              <p>{{ __('区代销售奖') }}</p>
            </view>
            <text class="m-cell-ft"></text>
          </navigator>


        </view>
      </view>
    </view>


    <view style="margin-left: 20rpx;margin-top: 20rpx;margin-bottom: 10rpx;">
      <text>{{ __('最近收入') }}</text>
    </view>
    <view class="qiun-charts">
      <!--#ifdef MP-ALIPAY -->
      <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio"
              :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"
              @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
      <!--#endif-->
      <!--#ifndef MP-ALIPAY -->
      <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA"
              @touchend="touchEndLineA"></canvas>
      <!--#endif-->
    </view>

    <!-- #ifdef APP-PLUS -->
    <share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <share-box-mp :shareDataDefault="shareData" @cancelShare="cancelShare" @showCodeImg="showCodeImg"
                  @shareQRCode="shareQRCode"
                  @saveImg="saveImg" ref="shareBoxMp"></share-box-mp>
    <!-- #endif -->
  </view>
</template>

<script>
import shareBoxMp from '../../components/share-box-mp.vue'
import shareBoxApp from '../../components/share-box-app.vue'

import uCharts from './u-charts/u-charts.min.js';

import {mapMutations, mapState} from 'vuex'

var _self;
var canvaLineA = null;
var lastMoveTime = null;//最后执行移动的时间戳


export default {
  data() {
    return {

      fxData: {
        base: {},
        member_info: {},
        user_role: {}
      },

      PageQRCodeInfo: {
        Path: "",
        IsShare: false,
        IsShareBox: false,
        IsJT: false
      },
      shareData: {},


      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      Interactive: '',//交互显示的数据
	  commission_withdraw_mode:0,
    }
  },
  computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
  components: {
    shareBoxMp,
    shareBoxApp
  },
  async onLoad(options) {
	  await this.$onLaunched;
    uni.setNavigationBarTitle({
      title: this.__('推广中心')
    });

    var that = this;
    this.refreshData();
	
	
	// this.getPlantformInfo(function(plantformInfo) {
	//     that.setData({
	// 		commission_withdraw_mode: plantformInfo.plantform_commission_withdraw_mode,
	//     });
	// });
	
	
	that.setData({
	  commission_withdraw_mode: this.plantformInfo.plantform_commission_withdraw_mode,
	})
	
    _self = this;
    //#ifdef MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        if (res.pixelRatio > 1) {
          //正常这里给2就行，如果pixelRatio=3性能会降低一点
          //_self.pixelRatio =res.pixelRatio;
          _self.pixelRatio = 2;
        }
      }
    });
    //#endif

    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(450);
    this.getServerData();
  },
  onShareAppMessage() {
    return {
      title: this.userInfo.user_nickname,
      path: "/pagesub/westore/index?wd_id=" + this.userInfo.user_id
    }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    if (this.$refs.shareBoxApp.showBoxView) {
      this.$refs.shareBoxApp.cancel();
      return true;
    }
    // #endif
    // #ifdef MP-WEIXIN
    if (this.$refs.shareBoxMp.showBoxView) {
      this.$refs.shareBoxMp.cancel();
      return true;
    }
    // #endif
  },
  onUnload() {
    // #ifdef APP-PLUS
    if (this.$refs.shareBoxApp.showBoxView) {
      this.$refs.shareBoxApp.cancel();
    }
    // #endif
    // #ifdef MP-WEIXIN
    if (this.$refs.shareBoxMp.showBoxView) {
      this.$refs.shareBoxMp.cancel();
    }
    // #endif
  },
  
  onNavigationBarButtonTap(e) {
    var that = this;

    if (e.index === 0) {
      that.onShareBox(e);
    } else {
      uni.showToast({
        title: "你点了收藏按钮",
        icon: "none"
      })
    }
  },
  methods: {
    ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceuserInfo', 'getuserInfo']),
	copyId: function (user_id) {
		uni.setClipboardData({
		  data: user_id,
		  complete() {
			uni.showToast({
			  title: "已复制到剪贴板"
			})
		  }
		})
	  },
    refreshData: function (callback) {

      var that = this;
      let params = {};

      that.$.request({
        url: this.Config.URL.fx.index,
        data: params,
        /* ajaxCache: {
                      timeout: this.Config.CACHE_EXPIRE
                  }, */
        success: function (data, status, msg, code) {
          that.setData({
            fxData: data
          })
        }
      });
    },
    onShareBox: function (e) {

      let that = this;
      var $href = that.$.sprintf('%s/tmpl/member/directseller_store.html?u_id=%d&FX=%d', this.Config.WapSiteUrl, this.post.wd_id, this.userInfo
          .user_id);


      $href = that.$.sprintf('%s/h5/pagesub/westore/index?wd_id=%s&uid=%d', that.Config.SiteUrl, this.post.wd_id, this.userInfo.user_id);

      // 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
      // #ifdef APP-PLUS
      // #endif

      // #ifdef MP-WEIXIN
      $href = "/pagesub/westore/index?wd_id=" + this.post.wd_id;
      // #endif

      this.setData({
        shareData: {
          shareTitle: this.store_data.westore_name,
          shareText: this.store_data.westore_name,
          href: $href,
          image: this.store_data.invite_info.qrcode
        }
      });

      // 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
      // #ifdef APP-PLUS
      this.$refs.shareBoxApp.show();
      // #endif

      // #ifdef MP-WEIXIN
      this.$refs.shareBoxMp.show();
      // #endif
    },


    getServerData() {
      let that = this;
      that.$.request({
        url: this.Config.URL.fx.getCommissionTimeline,
        data: {},
        /* ajaxCache: {
          timeout: this.Config.CACHE_EXPIRE
        }, */
        success: function (data, status, msg, code) {
          _self.showLineA("canvasLineA", data);

        }
      });
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'line',
        colors: ['#facc14', '#f04864', '#8543e0', '#90ed7d'],
        fontSize: 11,
        padding: [15, 15, 0, 15],
        legend: {
          show: true,
          padding: 5,
          lineHeight: 11,
          margin: 0,
        },
        dataLabel: false,
        dataPointShape: true,
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: 'grid',
          gridColor: '#CCCCCC',
          gridType: 'dash',
          dashLength: 8,
          //disableGrid:true
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          line: {
            type: 'straight'
          }
        }
      });

    },
    touchLineA(e) {
      lastMoveTime = Date.now();
    },
    moveLineA(e) {
      let currMoveTime = Date.now();
      let duration = currMoveTime - lastMoveTime;
      if (duration < Math.floor(1000 / 60)) return;//每秒60帧
      lastMoveTime = currMoveTime;

      let currIndex = canvaLineA.getCurrentDataIndex(e);
      if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
        let riqi = canvaLineA.opts.categories[currIndex];
        let leibie = canvaLineA.opts.series[0].name;
        let shuju = canvaLineA.opts.series[0].data[currIndex];
        this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
      }
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      });
    },
    touchEndLineA(e) {
      let currIndex = canvaLineA.getCurrentDataIndex(e);
      if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
        let riqi = canvaLineA.opts.categories[currIndex];
        let leibie = canvaLineA.opts.series[0].name;
        let shuju = canvaLineA.opts.series[0].data[currIndex];
        this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
      }
      canvaLineA.touchLegend(e);
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      });
    },
	copyId: function (user_id) {
	  uni.setClipboardData({
	    data: user_id,
	    complete() {
	      uni.showToast({
	        title: "已复制到剪贴板"
	      })
	    }
	  })
	}
	/*,
				changeData(){
					if(isJSON(_self.textarea)){
						let newdata=JSON.parse(_self.textarea);
						canvaLineA.updateData({
							series: newdata.series,
							categories: newdata.categories
						});
					}else{
						uni.showToast({
							title:'数据格式错误',
							image:'../../../static/images/alert-warning.png'
						})
					}
				}*/
  }
}
</script>

<style lang="scss">

@import '../../styles/_variables.scss';


.u-loadmore {
  width: 100%;
}


.member-top {
  -webkit-animation: changeBg 20s infinite;
  animation: changeBg 20s infinite;
  background-color: #ff6700;
  background-image: url('');
  background-size: cover;
  text-align: center;
  width: 100%;
  /*height: 11rem;*/

  overflow: hidden;
  height: 480rpx; /* 320 */

  color: #fff;
  position: relative;
  z-index: 1;
}

@-webkit-keyframes changeBg {
  0% {
    background-color: #ff6700;
  }

  90% {
    background-color: #ff6700;
  }

  10% {
    background-color: #fb6e52;
  }

  20% {
    background-color: #ffce55;
  }

  30% {
    background-color: #a0d468;
  }

  40% {
    background-color: #48cfae;
  }

  50% {
    background-color: #4fc0e8;
  }

  60% {
    background-color: #5d9cec;
  }

  70% {
    background-color: #ac92ed;
  }

  80% {
    background-color: #ec87bf;
  }
}

@keyframes changeBg {
  0% {
    background-color: #ff6700;
  }

  90% {
    background-color: #ff6700;
  }

  10% {
    background-color: #fb6e52;
  }

  20% {
    background-color: #ffce55;
  }

  30% {
    background-color: #a0d468;
  }

  40% {
    background-color: #48cfae;
  }

  50% {
    background-color: #4fc0e8;
  }

  60% {
    background-color: #5d9cec;
  }

  70% {
    background-color: #ac92ed;
  }

  80% {
    background-color: #ec87bf;
  }
}

.m-banner-img {
  width: 100%;
  /*height: 200rpx;*/
  vertical-align: top;
  position: relative;
}

.m-user-info {
  text-align: center;
  /*
  position: absolute;
  top: 115rpx;
  width: 140rpx;
  height: 140rpx;
  left: 50%;
  margin-left: -70rpx;
  */
  z-index: 3;
  color: #666;
  margin-top: 100rpx;
}

.m-user-info image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 120rpx;
  border: 1px solid #fff;
  vertical-align: middle;
  box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35);

  position: absolute;
  left: 305rpx;
}

.m-user-info .m-name {
  position: absolute;
  top: 260rpx;
  text-align: center;
  width: 750rpx;
}

.m-user-info text, .m-user-info label {
  line-height: 70rpx;

  font-size: 28rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  font-weight: bold;
}

.m-user-info .Phone {
  width: 140rpx;
  height: 140rpx;
  border-radius: 120rpx;
  border: 1px solid #fff;
  vertical-align: middle;
  box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.m-user-info .NickName {
  line-height: 70rpx;
  display: block;
  font-size: 28rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.member-order-tab {
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  line-height: 20px;
  /*box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);*/

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.i-type {
  font-size: 40rpx;
}

.m-cell-hd {
  text-align: center;
  line-height: 56rpx;
}

.member-order-tab .g-flex-item {
  padding: 28rpx 0 20rpx 80px;
}

.member-order-tab .g-flex-item:active {
  background-color: #ececec;
}

.my_od {
  border-left: 1px solid #dfdfdf;
}

.all_order {
  position: relative;
  display: block;
}

.m-panel-bd {
  margin-top: 20rpx;
}

.m-panel-bd label {
  vertical-align: middle;
  font-size: 50rpx;
  margin: 0rpx 10rpx;
}

.m-cell-primary {
  font-size: 24rpx;
  margin-top: 10rpx;

  label {
    font-size: 24rpx;
  }
}

.m-animate-img {
  width: 100%;
  height: 250rpx;
  overflow: hidden;
  -webkit-animation: imageAnimation 15s linear infinite alternate;
  animation: imageAnimation 15s linear infinite alternate;
  webkit-backface-visibility: hidden;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin-top: -20px;
}

.m-animate-warp {
  overflow: hidden;
  height: 200rpx;
  -webkit-animation: imageAnimation 15s linear infinite alternate;
  animation: imageAnimation 15s linear infinite alternate;
}

@-webkit-keyframes imageAnimation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 100%;
  }
}

@keyframes imageAnimation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 100%;
  }
}

.iconBoxLattice .m-cell {
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  text-align: center;
  border-right: 1rpx solid #f8f8f8;
  border-bottom: 1rpx solid #f8f8f8;
}

.iconBoxLattice .m-cell .iconfont {
  font-size: 60rpx;
}

.iconBoxLattice .m-cell::before {
  border: none;
}

.iconBoxLattice .m-cell p {
  font-size: 24rpx;
}

.iconBoxLattice .m-cell label {
  font-size: 24rpx;
}

.iconBoxLattice .m-cell label.iconfont {
  font-size: 60rpx;
}

.iconBoxLattice .m-cell label.zc {
  font-size: 48rpx;
}

.iconBoxLattice .m-cell image {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 60rpx !important;
  height: 60rpx !important;
}

.iconBoxLattice .m-cell-ft {
  display: none;
}

.msk {
  position: fixed;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.model {
  width: 80%;
  height: 290rpx;
  background: #fff;
  border-radius: 6rpx;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hint {
  height: 200rpx;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hint::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.hint .title {
  font-size: 36rpx;
}

.hint .content {
  width: 80%;
  color: #999999;
  font-size: 30rpx;
  margin-top: 20rpx;
}

.operation {
  height: 90rpx;
  display: flex;
  align-items: center;
}

.cancel,
.success {
  flex: 1;
  background: #fff;
  height: 90rpx;
  font-size: 36rpx;
}

button::after {
  line-height: none;
}

.cancel {
  position: relative;
  text-align: center;
  line-height: 90rpx;
}

.success {
  color: #3cc51f;
  padding: 0;
}

.cancel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-right: 2px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.m-cell-bd label {
  margin: 0rpx 5rpx;
}


/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 750rpx;
  height: 450rpx;
  background-color: #FFFFFF;
}

.charts {
  width: 750rpx;
  height: 450rpx;
  background-color: #FFFFFF;
}
</style>
